<template>
  <div class="router-content">
    <inside v-for="(div, index) in article" :key="index" :title="div.title" :contents="div.contents" :urls="div.urls"></inside>
  </div>
</template>

<script>
import Bus from '@/assets/bus'
import inside from '@/components/inside'
export default {
  name: 'index',
  components: {
    inside
  },
  data () {
    return {
      menus: [],
      article: []
    }
  },
  created () {
    this.menus = this.$route.matched
    Bus.$emit('menus', this.menus)
    // console.log(this.$route.matched)
    this.write()
  },
  methods: {
    write () {
      this.article = [
        {
          title: '创建单品',
          contents: [
            '进入单品页面，点击右上角“添加单品”如下图所示',
            '进入单品编辑页面，如下图所示，',
            '填写单品信息，点击保存，弹出保存成功对话框，提示是否继续添加单品，点击返回列表则返回到单品列表的主页面。点击继续添加则回到当前页面继续添加单品。'
          ],
          urls: [
            '/static/imgs/base/item_1.png',
            '/static/imgs/base/item_2.png',
            '/static/imgs/base/item_3.png'
          ]
        }, {
          title: '设置价格',
          contents: [
            '在单品列表页面的对添加的单品进行设置价格，点击价格下面那一栏如下图所示，进行添加或者修改价格。'
          ],
          urls: [
            '/static/imgs/base/item_4.png'
          ]
        }, {
          title: '单品详情',
          contents: [
            '点击单品列表页面的单品旁边的“详情”如下图所示，进入该单品详情页面。'
          ],
          urls: [
            '/static/imgs/base/item_5.png'
          ]
        }, {
          title: '添加营养成分',
          contents: [
            '点击单品列表页面的单品旁边的“营养”如下图所示',
            '进入单品营养页面，如下图所示，可以添加该单品的营养成分，点击保存，即可添加单品营养成分。'
          ],
          urls: [
            '/static/imgs/base/item_6.png',
            '/static/imgs/base/item_7.png'
          ]
        }, {
          title: '删除单品',
          contents: [
            '点击单品列表页面的单品旁边的“删除”如下图所示',
            '即可删除该单品。'
          ],
          urls: [
            '/static/imgs/base/item_8.png'
          ]
        }, {
          title: '查询单品',
          contents: [
            '选择查询目标单品的档口、类别，输入目标单品名称，如下图所示，点击查询按钮，即可查询目标单品。'
          ],
          urls: [
            '/static/imgs/base/item_9.png'
          ]
        }
      ]
    }
  }
}
</script>
<style>
</style>
